<template>
	<base-breadcrumb>
		<template>
			<div class="table-page-search-wrapper">
				<TitleName title="施组(方案)审批计划"></TitleName>
				<a-form>
					<a-row :gutter="24">
						<a-col :md="8" :sm="8">
							<a-form-item label="打分表名称" 
							:labelCol="{ lg: { span: 7 }, sm: { span: 7 } }" 
							:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
								<BaseInput />
							</a-form-item>
						</a-col>
						<a-col :md="8" :sm="8">
							<a-form-item label="所属分类" 
							:labelCol="{ lg: { span: 6 }, sm: { span: 6 } }" 
							:wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }">
								<a-select @select="handleChange" placeholder="请选择">
									<a-select-option value="0">科技部-技术部</a-select-option>
									<a-select-option value="1">安监部</a-select-option>
									<a-select-option value="2">商务部门</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :md="8" :sm="8">
							<a-form-item label="创建人" 
							:labelCol="{ lg: { span: 5 }, sm: { span: 5 } }" 
							:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
								<BaseInput   />
							</a-form-item>
						</a-col>
						<a-col :md="8" :sm="8">
							<a-form-item label="创建时间" 
							:labelCol="{ lg: { span: 5 }, sm: { span: 5 } }" 
							:wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
								<BaseInput   />
							</a-form-item>
						</a-col>
						<a-col :md="16" :sm="16">
							<a-form-item label="说明" 
							:labelCol="{ lg: { span: 2 }, sm: { span: 2 } }" 
							:wrapperCol="{ lg: { span: 22 }, sm: { span: 22 } }">
								<BaseTextarea />
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</div>
		</template>
		<a-card>
			<div>
				<TitleName title="打分项"></TitleName>
				<a-button @click="addTable">添加打分项</a-button>
			</div>
			<a-table :data-source="dataSource" :columns="columns1" @expand="expandedRowsChange" >
				<!-- 操作 -->
				<span slot="operation" slot-scope="text, record,index">
				   <a @click="addEdit(record,true)">添加行</a>
				</span>
				<!-- 二级表格 -->
				<a-table 
				:showHeader="false" 
				slot="expandedRowRender" 
				slot-scope="text" 
				:columns="columns" 
				:data-source="dataSource" 
				:pagination="false"
				>
					<!-- 操作 -->
					<span slot="operation" slot-scope="text, record">
					  <template>
					   <a @click="addEdit(record,false)">编辑</a>
					    <a-divider type="vertical"/>
					   <a @click="Delete(record)">删除</a>
					  </template>
					</span>
				</a-table>
			</a-table>
		</a-card>
		<!-- 新增打分表 -->
		<newlyAdded
		:visible ="visible"
		@cancel="handleCancel"
		@ok="handleOk"
		>
		</newlyAdded>
		<!-- 添加行和编辑 -->
		<editForm
		:visibles = "visibles"
		@cancel="handleCancels"
		@ok="handleOks"
		>
		</editForm>
	</base-breadcrumb>
</template>

<script>
	import TitleName from '@/components/TitleName/index.vue'
	import editForm from './components/editForm.vue'
	import newlyAdded from './components/newlyAdded.vue'
	const columns1 = [
		{
			title: '打分项',
			dataIndex: 'projectName'
		},
		{
			title: '分值',
		},
		{
			title: '是否为否决项',
		},
		{
			title: '操作',
			dataIndex: 'operation',
			width: '120px',
			scopedSlots: { customRender: 'operation' }
		}
	];
	const columns = [
		{
			dataIndex: 'projectName'
		},
		{
			dataIndex: 'timeForComplation'
		},
		{
			dataIndex: 'branchCompany'
		},
		{
			dataIndex: 'operation',
			width: '120px',
			scopedSlots: { customRender: 'operation' }
		}
	];
	const dataSource = [
		{
			projectName:1111,
			timeForComplation:2222,
			branchCompany:33333,
			vompletedBy:44444,
			status:1,
			fillingInTime:5555555
		}
	]
	export default{
		components:{
			editForm,newlyAdded,TitleName
		},
		data(){
			this.columns1 = columns1
			this.columns = columns
			this.dataSource = dataSource
			return{
				visible:false,
				visibles:false,
			}
		},
		methods:{
			expandedRowsChange() {},
			handleChange() {},
			// 添加行
			addEdit(a,b){
				if(b === true){
					this.visibles = true
				}else{
					this.visibles = true
				}
				
			},
			//新增打分项
			addTable(){
				console.log(111)
				this.visible = true
			},
			handleOk(){
				this.visible = false
			},
			handleOks(){
				this.visibles = false
			},
			handleCancel(){
				this.visible = false
			},
			handleCancels(){
				this.visibles = false
			}
		}
	}
</script>

<style>
</style>
